<script setup>
import { getSingerInfo } from "../../../apis/user";
import { ref } from "vue";
import { useRoute } from "vue-router";
import emitter from "../../../utils/eventBus";
const route = useRoute();

const singerIntroduce = ref();

const getInit = () => {
  getSingerInfo({ id: route.query.id }).then((res) => {
    singerIntroduce.value = res.data.artist;
  });
};
getInit();

const handlePlay = ()=>{
  emitter.emit('playFirstMusic')
}
</script>

<template>
  <div class="singer_wrap">
    <el-container>
      <el-header v-if="singerIntroduce" height="200px">
        <div class="wrap">
          <div class="img">
            <!-- <img :src="playList.coverImgUrl" alt="" /> -->
            <el-image
              :preview-src-list="[singerIntroduce.cover]"
              lazy
              :src="singerIntroduce.cover+`${'?param=500y500'}}` "
              fit="cover"
            >
              <template #placeholder>
                <div class="image-slot">
                  Loading<span class="dot">...</span>
                </div>
              </template>
            </el-image>
          </div>
          <div class="title">
            <div class="head-name">
              <div class="name">{{ singerIntroduce.name }}</div>
            </div>
            <!-- 作者信息 -->
            <div class="creator">
              <!-- 作者名 -->
              <span> 艺人 </span>
              <!-- 创建时间 -->
              <div>
                {{ singerIntroduce.musicSize }}首歌·
                {{ singerIntroduce.albumSize }}张专辑·{{
                  singerIntroduce.mvSize
                }}个MV 创建
              </div>
            </div>
            <div class="intro">
              <div>
                {{ singerIntroduce.briefDesc }}
              </div>
            </div>
            <div class="button">
              <el-button
                @click="handlePlay"
                type="primary"
                class="iconfont icon-24gf-play play"
              >
                播放</el-button
              >
              <!-- <el-button type="primary" class="iconfont icon-24gf-play play">
                关注</el-button
              > -->
            </div>
          </div>
        </div>
      </el-header>
    </el-container>
  </div>
</template>

<style scoped lang="scss">
.el-header {
  margin-top: 20px;
  .wrap {
    // padding: 0 15px;
    display: flex;
    height: 100%;
    .img .el-image {
      width: 200px;
      height: 200px;
      /* height: 100%; */
      border-radius: 50%;
      // box-shadow: 10px 10px 10px transparent;
      box-shadow: 6px 4px 10px rgba(145, 206, 206, 0.774);
    }
    .title {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 40px;
      .name {
        display: inline-block;
        font-weight: 600;
        font-size: 40px;
      }
      .creator {
        span {
          font-size: 17px;
        }
        div {
          margin-top: 5px;
          font-size: 14px;
          color: rgb(121, 118, 118);
        }
      }
      .intro {
        div {
          text-align: justify;
          text-justify: inter-ideograph;
          font-size: 15px;
          height: 50px;
          color: rgb(121, 118, 118);
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; /*想省略几行就写几*/
          -webkit-box-orient: vertical;
        }
      }
      .button {
        display: flex;
        .play {
          background-color: #eaeffd;
          border: none;
          color: #335eea;
          font-size: 17px;
          font-weight: 600;
        }
        .play:hover {
          transform: scale(1.1);
        }
        .shoucang:hover {
          transform: scale(1.1);
        }
        .shoucang {
          background-color: rgb(224, 219, 219);
          border: none;
          width: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          color: #333;
        }
      }
    }
  }
}
</style>
